<template>
  <div class="article-card">
   <!-- 文章标题 --> 
    <header>
      <h2 class="color1" @click="viewArticleDetail">{{ info.articleTitle }}</h2>
    </header>
    <!-- 文章介绍 -->
    <div class="dec">简介: {{ info.articleDescription }}</div>
    <!-- 文章信息 -->
    <footer>
      <div>作者: {{ info.articleAuthor }}</div>
      <div><i class="el-icon-time"></i> {{ info.createTime | dateTime }}</div>
      <div><i class="el-icon-menu"></i> {{ info.articleType.articleTypeName == undefined?'无分类':info.articleType.articleTypeName }}</div>
      <div><i class="el-icon-chat-round"></i> {{ info.commentNum }}</div>
      <div><i class="el-icon-view"></i> {{ info.looknum }}</div>
      <div><i class="el-icon-star-off"></i> {{ info.likenum }}</div>
    </footer>
  </div>
</template>

<script>
export default {
  props: {
    info: {
      type: Object
    }
  },
  methods: {
    viewArticleDetail() {
      this.$router.push({path: `/articleDetail/${this.info._id}`})
    }
  },
}
</script>

<style lang="scss">
.article-card {
  transition: all 0.4s;
  border-bottom: 1px solid #e6e6e6;
  // border-top: 1px solid #e6e6e6;
  // margin-bottom: 10px;
  padding: 20px 10px 20px 10px;
  &:hover {
    border-radius: 3px;
    box-shadow: 2px 2px 8px #d1d1d1;
  }
  header {
    margin-bottom: 8px;
    h2 {
      display: inline;
      transition: all 0.3s;
      padding-bottom: 2px;
      &:hover {
        cursor: pointer;
        color: orange;
        // border-bottom: 2px solid orange;
      }
    }
    
  }
  .dec {
    color: #606266;
    margin-bottom: 8px;
    min-height: 60px; 
    overflow:hidden;
    text-overflow:ellipsis;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:3; 
  }
  footer {
    display: flex;
    justify-content: space-between;
    div {
      font-size: 13px;
      color: #9b9b9b;
    }
  }
}
</style>